<template>
	<view class="container">
		<!-- 搜索 -->
		<view class="search-view">
			<u-input v-model="val" placeholder="输入要查询的视频名称" clearable shape="circle">
				<template slot="prefix">
					<u-icon size="16" name="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/7798330e-c3c9-4952-ae50-1e4b8416b310.png"></u-icon>
				</template>
				<template slot="suffix">
					<view class="button" @click="handleSearch">
						搜索
					</view>
				</template>
			</u-input>
		</view>
		<view v-if="searchno">
			<!-- 历史记录 -->
			<view class="history-view" v-if="ifhistory">
				<view class="search-title">
					<view class="lately">最近搜索</view>
					<view class="del" @click="removeStorage">
						<u-icon name="trash"></u-icon>
						<text>清空</text>
					</view>
				</view>
				<view class="menu-block">
					<view class="item" v-for="(item,index) in setdata" :key="index" @click="menubtn(item)">{{item.searchText}}</view>
				</view>
			</view>
			<!-- 热门 -->
			<view class="hot-view" v-if="hotsPotList.length > 0">
				<view class="hot-title">热门</view>
				<view class="hot-list">
					<view class="hot-item" v-for="(item,index) in hotsPotList" :key="index" @click="handleHot(item)">
						<view v-if="index < 3">
							<image class="hot-image" v-if="index === 0" src="../static/image/hot1.png"></image>
							<image class="hot-image" v-if="index === 1" src="../static/image/hot2.png"></image>
							<image class="hot-image" v-if="index === 2" src="../static/image/hot3.png"></image>
						</view>
						<view class="sort" v-else>{{index + 1}}</view>
						<view class="content">{{item.headline}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!searchno">
			<view class="paging">
				<z-paging ref="paging" :auto="false" :fixed="false">
					<view class="paging-item" v-for="(item,index) in dataList" :key="index" @click="to_video(item.video_info_id)">
						<view class="cover">
							<view>
								<u-image :src="item.video_img" v-if="item.video_img" radius="12"></u-image>
								<u-image src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/a8dedf10-b511-4c59-8ac2-058b823b01bf.png" radius="12" v-else></u-image>
							</view>
							<view class="play">
								<image src="../static/image/bofang.png"></image>
							</view>
							<view class="count">
								<image src="../static/image/count.png"></image>
								<text>{{numberToWan(item.view_counts)}}</text>
							</view>
							<view class="duration">
								{{item.duration_counts}}
							</view>
						</view>
						<view class="name">{{item.headline || ''}}</view>
						<view class="dec">{{item.subhead || ''}}</view>
					</view>
				</z-paging>
			</view>
		</view>
		<!-- 没有搜索结果的提示-->
		<view class="empty" v-if="isEmpty">
			<u-empty mode="search" iconSize="120" textSize="32rpx"></u-empty>
		</view>
		<!-- 弹窗 -->
		<u-modal :show="show" title="提醒？" content='是否确认清空?' width="300px" showCancelButton @cancel="show = false" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	//引入请求文件
	import {listing} from '../../api/api.js'
	import {hotspot,searchHistory,headline,delHistory} from '../../api/request.js'
	export default {
		data(){
			return{
				val:'',
				hotsPotList:[],//热点视频信息
				setdata:[],//检索历史数据
				searchno:true,
				ifhistory:false,//是否有搜索历史
				dataList:[],
				show:false,
				isEmpty:false
			}
		},
		created() {
			this.getData()
		},
		methods:{
			//获取热点视频信息
			getData(){
				Promise.all([listing(hotspot),listing(searchHistory)])
				.then(res=>{
					this.hotsPotList = res[0].data?.data
					if(res[1].data?.data && res[1].data?.data.length > 0){
						this.ifhistory = true
						this.setdata = res[1].data?.data.filter(v=>v.searchText)
					}else{
						this.ifhistory = false
					}
				})
			},
			//搜索
			handleSearch(){
				const val = (this.val || '').trim()
				listing(headline+`?headline=${val}`)
				.then(res=>{
					if(res.data.code == 200){
						this.searchno = false
						if(res.data?.data.length != 0){
							this.isEmpty = false
						}else{
							this.isEmpty = true
						}
						this.dataList = res.data?.data
					}
				})
			},
			numberToWan(num){
				if(num >= 10000){
					return (num / 10000).toFixed(2)+'万'
				}else{
					return num
				}
			},
			//清空历史记录
			removeStorage(){
				this.show = true
			},
			confirm(){
				listing(delHistory)
				.then(res=>{
					if(res.data.code == 200){
						this.ifhistory = false
						this.show = false
					}
				})

			},
			//点击历史记录
			menubtn({searchText}){
				this.val = searchText
				this.handleSearch()
			},
			//点击热门
			handleHot({headline}){
				this.val = headline
				this.handleSearch()
			},
			//跳转到视频
			to_video(videoInfoId){
				uni.navigateTo({
					url:'../../packagesVideo/video/video?id='+videoInfoId
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
        position: fixed;
		width: 100%;
		height: 100%;
		background: #F6F7F8;
		box-sizing: border-box;
		.search-view{
			margin: 16rpx 32rpx 0;
			/deep/.u-input{
				background: #fff !important;
				color: #898783;
			}
			/deep/.u-icon__icon{
				font-size: 40rpx !important;
			}
			.button{
				background: #FF770F;
				color: #fff;
				padding: 6rpx 36rpx;
				border-radius: 26rpx;
			}
		}
		.history-view{
			margin: 50rpx 32rpx 0;
			.search-title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.lately{
					font-size: 30rpx;
					font-weight: bold;
				}
				.del{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #85827c;
					/deep/.u-icon__icon{
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
			.menu-block{
				display: flex;
				flex-wrap: wrap;
				.item{
					background-color: #f7f8fa;
					border-radius: 6rpx;
					font-size: 27rpx;
					color: #292c33;
					padding: 10rpx;
					margin: 20rpx 20rpx 0 0;
				}
			}
		}
		.hot-view{
			margin: 50rpx 32rpx;
			.hot-title{
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.hot-list{
				background: linear-gradient(to bottom, #FDE5D9, #FFFDFD);
				border: 2rpx solid #f7e4be;
				color: #595347;
				font-size: 28rpx;
				padding: 28rpx;
				border-radius: 16rpx;
				box-sizing: border-box;
				.hot-item{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.hot-image{
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
					}
					.sort{
						width: 40rpx;
						height: 40rpx;
						text-align: center;
					}
					.content{
						margin-left: 16rpx;
					}
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
		.paging{
			height: calc(100vh - 200rpx);
			padding: 32rpx;
			&-item{
				margin-bottom: 20rpx;
				box-sizing: border-box;
				&:nth-child(2n){
					margin-right: 0;
				}
				.cover{
					position: relative;
					font-size: 24rpx;
					color: #fff;
					/deep/.u-image{
						width: 340rpx !important;
						height: 200rpx !important;
					}
					/deep/.u-image__image{
						width: 340rpx !important;
						height: 200rpx !important;
					}
					/deep/.u-image__error{
						width: 340rpx !important;
						height: 200rpx !important;
					}
					.play{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						image{
							width: 56rpx;
							height: 56rpx;
						}
					}
					.count{
						position: absolute;
						bottom: 20rpx;
						left: 20rpx;
						display: flex;
						align-items: center;
						image{
							width: 32rpx;
							height: 32rpx;
						}
					}
					.duration{
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;
					}
				}
				.name{
					font-size: 28rpx;
					font-weight: bold;
					padding: 10rpx 0;
					width: 340rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.dec{
					font-size: 24rpx;
					color: #59554e;
					width: 340rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
	.empty{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	/deep/ .zp-paging-container-content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	/deep/.zp-l-container{
		width: 100vw;
		text-align: center;
	}
	/deep/.u-modal__content__text{
		text-align: center;
	}
</style>